<link rel="stylesheet" href="../src/css/pages/createAd.css">
<div class="createAd-wrapper">
    <div class="panel panel-default" id="app">
        <div class="panel-heading">
            <h5>{{i18n-promoteObjective}}</h5>
        </div>
        <div class="panel-body">
            <ul class="ul-wrapper">
                <li>
                    <h5>{{i18n-product}}</h5>
                    <div class="ndp-drop-wrapper" name="product-drop"></div>
                </li>
                <li>
                    <h5>{{i18n-productFeed}}</h5>
                    <div class="ndp-drop-wrapper" name="feed-drop"></div>
                </li>
                <li>
                    <h5>{{i18n-productSet}}</h5>
                    <div class="ndp-drop-wrapper" name="productSet-drop"></div>
                </li>
                <li>
                    <h5>{{i18n-adAccount}}</h5>
                    <div class="ndp-drop-wrapper" name="account-drop"></div>
                </li>
            </ul>
            <div class="pic-wrapper" style="background: url(imgs/create-ad-big.png) no-repeat center;"></div>
        </div>
    </div>
    <!-- step 1 受眾管理-->
    <div class="panel panel-default" name="stepping" id="audience">
        <div class="panel-heading">
            <h5>{{i18n-audience}}</h5>
        </div>

        <div class="panel-body">
            <div>
                <div class="ndp-drop-wrapper" name="audience-drop"></div>
            </div>
            <hr>
            <span class="ad-title">{{i18n-crossSelling}}</span>
            <ul class="ad-body">
                <li class="" style="display:flex;padding-top:5px">
                    <div class="audience-product-set">
                        <input type="checkbox" id="cross-selling" class="form-input"  name="cross-selling" value="cross-selling">
                        <label for="cross-selling" class="m-l25-r40">
                            <span class="checkbox-mark"></span>
                            {{i18n-anotherProductSet}}
                        </label>
                        <div class="retarget-container hide">
                            <div class="ndp-drop-wrapper audience-product-set-drop" name="audience-product-set-drop"></div>
                        </div>
                    </div>
                </li>
            </ul>
            <hr>
            <div class="new-audience">
                <div class="new-audience-c">
                </div>
                <ul class="ad-body">
                    <li class="bottom10">
                        <button class="btn btn-primary btn-generate-audience">{{i18n-generateUserAudience}}</button>
                        <span class="audience-result"></span>
                        <!--<button class="btn btn-outline btn-save-audience">{{i18n-saveUserAudience}}</button>-->
                    </li>
                </ul>
                <span class="ad-title">{{i18n-audienceName}}</span>
                <ul class="ad-body">
                    <li class="show-shadow bottom10">
                        <input class="form-input" style="width:420px;" name="audience-name"/>
                    </li>
                </ul>
            </div>
            <div class="audience-template hide">
                <span class="ad-title">{{i18n-audienceDetail}}</span>
                <ul class="ad-body audience-detail-c">
                    <li class="show-shadow bottom10">
                    </li>
                </ul>
                <ul class="ad-body">
                    <li class="bottom10">
                        <button class="btn btn-primary btn-audience-edit">{{i18n-editUserAudience}}</button>
                    </li>
                </ul>
                <ul class="ad-body">
                    <li>
                        <span class="audience-result"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- step 2 預算出價-->
    <div class="panel panel-default" name="stepping" id="budget">
        <div class="panel-heading">
            <h5>{{i18n-budgetPrice}}</h5>
        </div>
        <div class="panel-body">
            <span class="ad-title">{{i18n-schedule}}</span>
            <ul class="ad-body">
                <li class="bottom10">
                    <div class="ndp-drop-wrapper" name="schedule-drop"></div>
                    <input type='text' class="daterangepicker-sample3">
                    <span class="schedule-goon"> ~ {{i18n-continuously}}</span>
                </li>
            </ul>
            <span class="ad-title">{{i18n-bidType}}</span>
            <ul class="ad-body">
                <li class="show-shadow">
                    <div class="optimizing-wrapper">
                        <span>{{i18n-optGoal}}</span>
                        <div class="ndp-drop-wrapper" name="optimizing-drop"></div>
                    </div>
                    <div class="activeType-wrapper" style="visibility:hidden">
                        <span>{{i18n-customEventType}}</span>
                        <div class="ndp-drop-wrapper" name="activeType-drop"></div>
                    </div>
                </li>
                <li class="show-shadow">
                    <span>{{i18n-billingEvent}}</span>
                    <div class="ndp-drop-wrapper" name="charge-drop"></div>
                </li>
                <li class="show-shadow">
                    <div class="budget-wrapper">
                        <span>{{i18n-budget}}</span>
                        <div class="ndp-drop-wrapper" name="budget-drop"></div>
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon">$</div>
                        <input class="form-control budget-input" type="number" min="5" placeholder="{{i18n-pleaseInputBudget}}">
                    </div>
                </li>
                <li class="show-shadow">
                    <div class="price-wrapper">
                        <span class="price-span">{{i18n-unitPrice}}</span>
                        <input type="radio" id="auto-price" name="price" checked class="form-input" value="true">
                        <label for="auto-price" class="r-label">
                            <span class="radio-dot"></span>
                            {{i18n-automatic}}
                        </label>
                        <input type="radio" id="manual-price" name="price" class="form-input" value="false">
                        <label for="manual-price" class="r-label">
                            <span class="radio-dot"></span>
                           {{i18n-manual}}
                        </label>
                    </div>
                    <div class="input-group budget-show-div hidden">
                        <div class="input-group-addon">$</div>
                        <input class="form-control price-input" type="number" min="0.01" placeholder=" {{i18n- pleaseInputPrice}}">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- step 3 广告创意-->
    <div class="panel panel-default" name="stepping" id="originality">
        <div class="panel-heading">
            <h5>{{i18n-adCreative}}</h5>
        </div>
        <div class="panel-body">
            <span class="ad-title">{{i18n-fbPage}}</span>
            <div class="ad-body">
                <div class="bottom10">
                <select name="homepage-select2" class="select-icon form-control select2-hidden-accessible">
                </select></div>
            </div>
            <span class="ad-title">{{i18n-creativeStyle}}</span>
            <div class="ad-body">
                <div class="bottom10 or-style">
                <input type="radio" id="pic-ad" name="pic" class="form-input" value="img" checked>
                <label for="pic-ad" class="r-label">
                    <span class="radio-dot"></span>
                    {{i18n-singlePictureAd}}
                </label>
                <input type="radio" id="video-ad" name="pic" class="form-input" value="carousel">
                <label for="video-ad" class="r-label">
                    <span class="radio-dot"></span>
                    {{i18n-CarouselAd}}
                </label>
                <input type="checkbox"  id="video-ad-extend" class="form-input" value="true">
                <label for="video-ad-extend" style="display: none;">
                    <span class="checkbox-mark"></span>
                    {{i18n-addPicToLast}}
                </label>
                </div>
            </div>
            <span class="ad-title"> {{i18n-CreativeTemplate}}</span>
            <div class="ad-body ">
                <div  class="bottom10">
                <ul class="tab-pane active img">
                    <li data-toggle="modal" class="tab-pane-cell pic-dashed"><i class="glyphicon glyphicon-plus"></i></li>
                    <li data-toggle="modal" class="tab-pane-cell pic-solid" style="display: none;">
                        <!--<div class="row">-->
                            <div class="thumbnail">
                                <!--<img data-src="imgs/test2.jpg" src="imgs/test2.jpg">-->
                            </div>
                        <!--</div>-->
                    </li>
                </ul>
            </div></div>
            <span class="ad-title"> {{i18n-callToAction}}</span>
            <div class="ad-body"></div>
            <div class="ad-body">
                <div class="ndp-drop-wrapper bottom10" name="originality-drop"></div>
            </div>
            <span class="ad-title">{{i18n-promoteWebSite}}</span>
            <div class="ad-body">
                <input class="bottom10" type="text" name="link" placeholder="{{i18n-expectedPromoteAdWordWebsite}}">
            </div>
            <div class="linkCaption-show-div hidden">
            <span class="ad-title">{{i18n-displayUrl}}</span>
            <div class="ad-body">
                <input class="bottom10" type="text" name="linkCaption"  placeholder="{{i18n-expectedShowAdWordWebsite}}">
            </div>
            </div>
            <span class="ad-title">{{i18n-headline}}</span>
            <div name="dpa-title-wrapper" class="ad-body">
                <div class="bottom10">
                    <div class="ndp-field-wrapper" name="dpaTitle"></div>
                    <div class="dpaTitle-select-tags select-tags" name="dpaTitle-tags">
                    </div>
                </div>
            </div>
            <span class="ad-title">{{i18n-adWord}}</span>
            <div name="dpa-adword-wrapper" class="ad-body">
                <!--<div class="bottom10 "  super-input super-input-warp="dpaAdwordSeq" focus-now="this">-->
                    <!--<div class="selected-tag" name-tag-action="true">-->
                        <!--<ul class="choices-list">-->
                            <!--<li class="choices-text">-->
                                <!--<input type="text"></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <!--<div class="select-tags" name-tag-action="true">-->
                    <!--</div>-->
                <!--</div>-->
                <div class="bottom10">
                    <div class="ndp-field-wrapper" name="dpaAdword"></div>
                    <div class="dpaAdword-select-tags select-tags" name="dpaAdword-tags">
                        <ul></ul>
                    </div>
                </div>
                <div class="bottom10 ">
                    <button class="btn btn-sm btn-primary import-ad-btn">{{i18n-importAdword}}</button>
                    <button class="btn btn-sm btn-outline save-ad-btn">{{i18n-saveAdword}}</button>
                </div>
            </div>
            <span class="ad-title">{{i18n-dynamicLinkDesc}}</span>
            <div name="dynamicMsgLinkDesc-wrapper" class="ad-body">
                <div class="bottom10">
                    <div class="ndp-field-wrapper" name="dynamicMsgLinkDesc"></div>
                    <div class="dpaAdword-select-tags select-tags" name="dynamicMsgLinkDesc-tags">
                        <ul></ul>
                    </div>
                </div>
                <!--<div class="bottom10" super-input super-input-warp="dynamicMsgLinkDescSeq" focus-now="this">-->
                    <!--<div class="selected-tag" name-tag-action="true">-->
                        <!--<ul class="choices-list">-->
                            <!--<li class="choices-text">-->
                                <!--<input type="text"></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <!--<div class="select-tags" name-tag-action="true">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<input class="bottom10"  name="dynamicMsgLinkDesc" type="text" placeholder="动态消息链接描述">-->
            </div>
            <span class="ad-title">{{i18n-trackParams}}</span>
            <div class="ad-body">
                <input class="bottom10"  name="linkParam" type="text" placeholder="{{i18n-websiteParams}}：key1=val1&key2=val2">
            </div>
        </div>
    </div>
    <!-- step 4 名称配置-->
    <div class="panel panel-default" name="stepping" id="nameConfig">
        <div class="panel-heading">
            <h5>{{i18n-adNameConfiguration}}</h5>
        </div>
        <div class="panel-body">
            <div class="user-layer">
                <ul class="user-title">
                    <li>{{i18n-campaignName}}</li>
                </ul>
                <ul class="user-body">
                    <div super-input super-input-warp="adCampSeq" focus-now="this">
                        <div class="selected-tag" name-tag-action="true">
                            <ul class="choices-list">
                                <li class="choices-text">
                                    <input type="text"></li>
                            </ul>
                        </div>
                        <div class="select-tags" name-tag-action="true">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </ul>
            </div>

            <div class="user-layer">
                <ul class="user-title">
                    <li>{{i18n-adSetName}}</li>
                </ul>
                <ul class="user-body">
                    <div  super-input super-input-warp="adSetSeq" focus-now="this">
                        <div class="selected-tag" name-tag-action="true">
                            <ul class="choices-list">
                                <li class="choices-text">
                                    <input type="text"></li>
                            </ul>
                        </div>
                        <div class="select-tags" name-tag-action="true">
                        </div>
                    </div>
                    </ul>
                </div>
            <div class="user-layer">
                <ul class="user-title">
                    <li>{{i18n-adName}}</li>
                </ul>
                <ul class="user-body">
                    <div  super-input super-input-warp="adGroupSeq" focus-now="this">
                        <div class="selected-tag" name-tag-action="true">
                            <ul class="choices-list">
                                <li class="choices-text">
                                    <input type="text"></li>
                            </ul>
                        </div>
                        <div class="select-tags" name-tag-action="true">
                            <ul>
                            </ul>
                        </div>
                    </div>
                    </ul>
                </div>
            <button class="btn btn-primary ad-publish">{{i18n-publish}}</button>
        </div>
    </div>
</div>

<div id="choose-originality-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-selectTemplate}}</h4>
            </div>
            <div class="modal-body">
                <!-- 不要删，这里还有个搜索条件，1期没有实现。 -->
               <!--<div class="form-horizontal tagWrapper">-->
                   <!--<div class="form-group">-->
                       <!--<label class="col-sm-2 control-label">名称标签</label>-->
                       <!--<div class="col-sm-10">-->
                           <!--<input type="text" class="form-control" placeholder="soufeel1">-->
                       <!--</div>-->
                   <!--</div>-->
                   <!--<div class="form-group">-->
                       <!--<label class="col-sm-2 control-label">样式标签</label>-->
                       <!--<div class="col-sm-10">-->
                           <!--<input type="text" class="form-control" placeholder="soufeel1">-->
                       <!--</div>-->
                   <!--</div>-->
               <!--</div>-->
                <div class="row">
                </div>
            </div>
            <!--<div class="modal-footer">-->
                <!--<button type="button" class="btn btn-primary delete-btn">确定</button>-->
                <!--<button type="button" class="btn btn-default" data-dismiss="modal"> {{i18n-cancel}}</button>-->
            <!--</div>-->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div id="import-adwords-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-importAdword}}</h4>
            </div>
            <div class="modal-body">
                <div class="ndp-drop-wrapper" name="adword-product-drop"></div>
                <div class="ndp-drop-wrapper" name="adword-language-drop"></div>
                <button type="button" class="btn btn-primary adword-search">{{i18n-search}}</button>
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                    <th>{{i18n-choose}}</th> <th>{{i18n-order}}</th> <th>{{i18n-adWords}}</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary adwords-import-btn">{{i18n-ok}}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"> {{i18n-cancel}}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div id="save-adwords-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-selectTemplate}}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group" style="height: 30px; margin-top: 0px;">
                    <label class="col-sm-2 control-label">{{i18n-Language}}</label>
                    <div class="col-sm-10">
                        <div class="ndp-drop-wrapper" name="adword-save-language-drop"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">{{i18n-comment}}</label>
                    <div class="col-sm-10">
                        <textarea  class="form-control" name="save-des"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary adwords-save-btn"> {{i18n-ok}}</button>
            <button type="button" class="btn btn-default " data-dismiss="modal"> {{i18n-cancel}}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div id="edit-audience-modal" class="modal fade">
    <div class="modal-dialog modal-1069">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-editUserAudience}}</h4>
            </div>
            <div class="modal-body">
                <div class="edit-audience-c"></div>
                <hr/>
                <span class="ad-title">{{i18n-audienceName}}</span>
                <ul class="ad-body">
                    <li class="show-shadow bottom10" style="display:flex;">
                        <input class="form-input" style="width:420px;" name="audience-name"/>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <div class="pull-left">
                    <button type="button" class="btn btn-primary btn-generate-audience">{{i18n-generateUserAudience}}</button>
                    <span class="audience-result"></span>
                </div>

                <button type="button" class="btn btn-primary btn-save-audience">{{i18n-saveNewUserAudience}}</button>
                <button type="button" class="btn btn-default cancel-btn" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>



<!-- 受众详情 -->
<script type="text/x-template" id="t-audience-detail">
    <% _.each(details,function (detail,i) { %>
    <div class="detail-block">
        <span class="detail-title"><%=detail.content%></span>
        <div class="detail-content">
            <% _.each(detail.children, function (child,i) { %>
                <%=child%> <br>
            <% }) %>
        </div>
    </div>
    <% }) %>
</script>

<!-- 新受众 -->
<script type="text/x-template" id="t-new-audience">
    <span class="ad-title">{{i18n-audienceRule}}</span>
    <ul class="ad-body">
        <!--<li class="show-shadow bottom10" style="display:flex;">-->
            <!--<div class="audience-product-set">-->
                <!--<input type="checkbox" id="cross-selling" class="form-input"  name="cross-selling" value="cross-selling">-->
                <!--<label for="cross-selling" class="m-l25-r40">-->
                    <!--<span class="checkbox-mark"></span>-->
                    <!--交叉销售-->
                <!--</label>-->
                <!--<div class="retarget-container hide">-->
                    <!--<label class="inner-label">另一商品系列：</label>-->
                    <!--<div class="ndp-drop-wrapper audience-product-set-drop" name="audience-product-set-drop"></div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</li>-->
        <li style="display:flex;">

            <div class="rule-item">
            </div>
            <button class="btn btn-primary btn-plus"><i class="glyphicon glyphicon-plus"></i></button>
        </li>
    </ul>
    <span class="ad-title">{{i18n-pageType}}</span>
    <ul class="ad-body">
        <li class="show-shadow bottom10" style="display:flex;">
            <input type="checkbox" id="mobilefeed" class="form-input"  name="page-type" value="mobilefeed">
            <label for="mobilefeed" class="m-l25-r40">
                <span class="checkbox-mark"></span>
                {{i18n-mobileNewsFeed}}
            </label>
            <input type="checkbox" id="mobileexternal" class="form-input"  name="page-type" value="mobileexternal">
            <label for="mobileexternal" class="m-l25-r40">
                <span class="checkbox-mark"></span>
                {{i18n-audienceNetwork}}
            </label>

            <input type="checkbox" id="desktopfeed" class="form-input"  name="page-type" value="desktopfeed">
            <label for="desktopfeed" class="m-l25-r40">
                <span class="checkbox-mark"></span>
                {{i18n-desktopNewsFeed}}
            </label>

            <input type="checkbox" id="rightcolumn" class="form-input"  name="page-type" value="rightcolumn">
            <label for="rightcolumn" class="m-l25-r40">
                <span class="checkbox-mark"></span>
                {{i18n-desktopRightColumn}}
            </label>
        </li>
    </ul>
    <span class="ad-title">{{i18n-otherAudienceConditions}}</span>
    <ul class="ad-body">
        <li class="show-shadow bottom10" style="display:flex;">
            <div class="ndp-drop-wrapper customaudience-include-drop" name="customaudience-include-drop"></div>
            <div class="customaudience-contaniner">
                <select class="customaudience"></select>
            </div>
        </li>
    </ul>
    <span class="ad-title">{{i18n-location}}</span>
    <ul class="ad-body">
        <li class="show-shadow bottom10" style="display:flex;">
            <div class="location-area">
                <div class="ndp-drop-wrapper location_types" name="location_types"></div>
                <div class="ndp-drop-wrapper location-clude" name="location-clude"></div>
                <div class="ndp-drop-wrapper location-type" name="location-type"></div>
                <div class="location-s">
                    <div class="location-s-c">
                        <select class="location-select2 select2-hidden-accessible" ></select>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <span class="ad-title">{{i18n-age}}</span>
    <ul class="ad-body">
        <li class="show-shadow bottom10" style="display:flex;">
            <div class="ndp-drop-wrapper min-age age" name="min-age"></div>
            <span class="age-seperate">-</span>
            <div class="ndp-drop-wrapper max-age age" name="max-age"></div>
        </li>
    </ul>
    <span class="ad-title">{{i18n-gender}}</span>
    <ul class="ad-body">
        <li class="show-shadow bottom10" style="display:flex;">
            <input type="radio"  id="all" class="form-input" name="gender" value="0" checked="checked">
            <label for="all" class="m-l25-r40">
                <span class="radio-dot"></span>
                {{i18n-all1}}
            </label>

            <input type="radio"  id="men" class="form-input" name="gender" value="1">
            <label for="men" class="m-l25-r40">
                <span class="radio-dot"></span>
                {{i18n-men}}
            </label>

            <input type="radio"  id="women" class="form-input" name="gender" value="2">
            <label for="women" class="m-l25-r40">
                <span class="radio-dot"></span>
                {{i18n-women}}
            </label>
        </li>
    </ul>
</script>
